<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--[if lt IE 9]>
     <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
   <![endif]-->
    <!-- 引入bootstrap 的样式文件 -->
    <link rel="stylesheet" href="./bootsrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row div {
            height: 200px;
            background-color: chartreuse;
        }
        .row div:nth-child(3) {
            background-color: chocolate;
        }
        span {
            font-size: 50px;
           color:  #ffffff;
        }
    </style>
</head>

<body>
    <!-- .col-lg-份数     -------------宽屏设备 -->
    <!-- .col-md-份数     -------------中等屏幕 -->
    <!-- .col-sm-份数     -------------小屏设备 -->
    <!-- .col-xs-份数     -------------超小屏幕 -->
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <!-- visible-lg     只在宽屏设备显示 -->
                <!-- visible-md     只在中等屏幕显示 -->
                <!-- visible-sm     只在小屏设备显示 -->
                <!-- visible-xs     只在超小屏幕显示 -->
                <span class="visible-lg">最大的</span>
            </div>
            <div class="col-xs-3">2</div>
            <!-- hidden-lg    宽屏设备下隐藏 -->
            <!-- hidden-md    中等屏幕下隐藏 -->
            <!-- hidden-sm    小屏设备下隐藏 -->
            <!-- hidden-xs    超小屏幕下隐藏 -->
            <div class="col-xs-3 hidden-md hidden-sm hidden-xs">血条消失</div>
            <div class="col-xs-3">4</div>
        </div>
    </div>
</body>

</html>